import React from 'react';
import { cloneDeep } from 'lodash';
import ImageRadio from '@/components/editor/Right/fields/ImageRadio';
import { MUTI_DASHBOARD_THEME_LIST, MUTI_THEME_OBJ } from '@/constants/constants';
// import { getPath } from '@/utils/utils';
import { FieldNodeSchema } from '@/app/codeTreeSlice';
import singleBg from '@/assets/images/ic_bg_assembly.svg';
import styles from '../index.less';
import RenderMutiDashboardAI from './renderMutiDashboardAI';
import RenderUsageTrendsProd2 from './renderUsageTrendsProd2';

export default function renderDashboardThemeTypeMuti(
  focusComponent: FieldNodeSchema | undefined,
  handleChange: (value: any, key: string) => void,
  groupState: any,
) {
  if (focusComponent?.type === 'MutiBalanceDashboardAI') {
    return (
      <RenderMutiDashboardAI
        focusComponent={focusComponent}
        handleChange={handleChange}
        groupState={groupState}
      />
    );
  }

  if (focusComponent?.type === 'UsageTrendsProd2') {
    return (
      <RenderUsageTrendsProd2
        focusComponent={focusComponent}
        handleChange={handleChange}
      />
    );
  }

  // 原来的 MutiBalanceDashboard 实现
  const currentProps = cloneDeep(focusComponent?.props) || {};
  const { infoList, floorPictures } = currentProps;

  // const requireContext = require.context('@/assets/images/floorPictures/', false, /^\.\/.*$/);

  const getImge = (path: string) => {
    return groupState.serverUrl + path;
    // try {
    //   let url = requireContext(`./${path}`);
    //   if (!url.includes('base64')) {
    //     url = getPath() + url;
    //   }
    //   return url;
    // } catch (error) {
    //   return singleBg;
    // }
  };

  const handleToChange = (key: string, src: any, width: any, height: any) => {
    // console.log(currentProps?.[key], 'key1');

    handleChange(
      [
        {
          ...(currentProps?.[key]?.[0] || {}),
          src: src || singleBg,
          width,
          height,
        },
      ],
      key,
    );
  };
  const handleFloorPicture = (value: string | number) => {
    // 处理默认上传4张模版图片
    handleChange('four', 'floorStyle');
    const _floorPictures = (floorPictures || []).map((it: { typeId: any }, index: number) => {
      return {
        ...it,
        src: getImge(`floor_${value}_${index + 1}.png`) || singleBg,
        width: 166,
        height: 212,
      };
    });
    handleChange(_floorPictures, 'floorPictures');
  };

  const handleChangeTheme = (value: any) => {
    handleChange(value, 'themeType');
    handleChange(MUTI_THEME_OBJ[value]?.balOrBillLinkColor, 'balOrBillLinkColor');
    handleChange(MUTI_THEME_OBJ[value]?.phoneNumberBgColor, 'phoneNumberBgColor');
    handleFloorPicture(value);
    const _infoList = (infoList || []).map((it: { typeId: any }) => {
      const getValue = (key: string) =>
        (MUTI_THEME_OBJ[value]?.infoList || []).find((i: { typeId: any }) => i.typeId === it.typeId)?.[key];
      return {
        ...it,
        titleColor: getValue('titleColor'),
        highlightColor: getValue('highlightColor'),
        bottomColor: getValue('bottomColor'),
      };
    });
    handleChange(_infoList, 'infoList');

    handleToChange('viewDetailPic', getImge(`floor_${value}_detail.png`), 264, 68);
    handleToChange('balIcon', getImge(`floor_${value}_bal.png`), 80, 80); // 预付费+
    handleToChange('billIcon', getImge(`floor_${value}_bill.png`), 80, 80);
    handleToChange('pointsIcon', getImge(`floor_${value}_bill.png`), 80, 80);
    handleToChange('pointsAmountIcon', getImge('floor_point.png'), 28, 28);
    handleToChange('circlePhoneIcon', getImge(`floor_${value}_phone.png`), 48, 48);
    handleToChange('circleChangeIcon', getImge(`floor_${value}_switch.png`), 48, 48);
  };
  return (
    <div>
      <ImageRadio
        className={styles.dashTheme}
        imgList={MUTI_DASHBOARD_THEME_LIST}
        hasImg={false}
        value={focusComponent?.props.themeType || '1'}
        onChange={(value: any) => handleChangeTheme(value)}
      />
    </div>
  );
}
